<template>
   <el-form ref="formRef" :model="formData" style="max-width: 600px" :rules="rules" label-width="auto"
      class="demo-ruleForm" status-icon>
      <el-form-item label="分类名称" prop="name">
         <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="分类图片" prop="img">
         <el-input v-model="formData.img" />
         <Tuku v-model="formData.img"></Tuku>
      </el-form-item>
      <el-form-item label="分类排序" prop="seq">
         <!-- <el-input v-model="formData.img" /> -->
         <el-input-number v-model="formData.seq" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="父目录" prop="parentId">
         <el-tree-select v-model="formData.parentId" :data="categoryTreeData" 
         check-strictly :render-after-expand="false"
            style="width: 240px" />
      </el-form-item>
      <el-form-item>
         <el-button type="primary" @click="submitForm(formRef)">
            提交
         </el-button>
         <el-button @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
   </el-form>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { CategoryApi } from '@/api';
import Tuku from '@/components/Tuku.vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter()
const formRef = ref()
const formData = reactive({
   name: '',
   img: '',
   seq: 0,
   parentId: 0
})
const categoryTreeData = ref([
   {
      value: 0,
      label: '一级目录'
   }

])
const rules = reactive({
   name: [
      { required: true, message: '请输入分类的名称', trigger: 'blur' },
      { min: 1, max: 10, message: '输入字符必须是1 to 10 字符', trigger: 'blur' },
   ],
})

onMounted(() => { 
   callCategoryTree()
})

const callCategoryTree = () => {
   CategoryApi.select.call().then((categoryData: any) => {
      categoryData.forEach((item: any) => {
         item.value = item.id
         item.label = item.name
      });
      //盒子 有标签
      const categoryData2 = categoryData.reduce((hezi: any, currentvalue: any) => {
         currentvalue.children = categoryData.filter((item: any) => {
            return item.parentId === currentvalue.id
         })
         if (currentvalue.parentId === 0) {
            hezi.push(currentvalue)
         }
         return hezi
      }, [])
      console.log("categoryData2==",categoryData2);
      
      categoryTreeData.value = categoryData2
   })
}


const formsubmit = () => {
   CategoryApi.insert.call({
      name: formData.name, img: formData.img,
      seq: formData.seq, parentId: formData.parentId
   }).then((res: any) => {
      console.log(res);
      ElMessage.success("上传成功")
      router.push({ name: 'category-list' })
   })
}



const submitForm = async (formEl: any | undefined) => {
   if (!formEl) return
   await formEl.validate((valid: any, fields: any) => {
      if (valid) {
         console.log('submit!')
         formsubmit()
      } else {
         console.log('error submit!', fields)
      }
   })
}

const resetForm = (formEl: any | undefined) => {
   if (!formEl) return
   formEl.resetFields()
}

</script>
<style>
.el-input-number .el-input__wrapper{
   padding-left: 0px;
   padding-right: 0px;
}

</style>